﻿@page "/chart/pie"

@using Syncfusion.Blazor
@using ThemeHelper
@using Syncfusion.Blazor.Charts

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This <a target='_blank' href='https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/pie-chart'>Blazor Pie Chart</a> example demonstrates pie chart for mobile browser usage statistics. Datalabel shows the Information about the points. While hovering on the slice, border will be highlighted.</p>
</SampleDescription>
<ActionDescription>
    <p>In this example, you can see how to render and configure the pie chart. The pie chart is a circular graphic, which is ideal for displaying proportional values in different categories. The <code>Pie Angle</code>, <code>Outer Radius</code>, <code>Explode Radius</code> and <code>Explode Index</code> options in the property panel can be used to customize the pie chart.</p>
    <p><code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
    <p>More information about the pie series can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/accumulation-chart/chart-types/pie-dough-nut/#pie-chart'>documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-8 control-section sb-property-border">
    <div class="control-section">
        <SfAccumulationChart Title="Mobile Browser Statistics" EnableAnimation="false" Theme="@Theme">
            <AccumulationChartTooltipSettings Enable="true"></AccumulationChartTooltipSettings>
            <AccumulationChartLegendSettings Visible="false"></AccumulationChartLegendSettings>
            <AccumulationChartSeriesCollection>
                <AccumulationChartSeries DataSource="@PieChartPoints" XName="Browser" YName="Users" Name="Browser" Radius="@OuterRadius" StartAngle="@StartAngle" EndAngle="@EndAngle"
                                         InnerRadius="0%" ExplodeIndex="@ExplodeIndex" Explode="true" ExplodeOffset="@ExplodeRadius">
                    <AccumulationDataLabelSettings Visible="true" Name="Browser" Position="AccumulationLabelPosition.Outside"></AccumulationDataLabelSettings>
                </AccumulationChartSeries>
            </AccumulationChartSeriesCollection>
        </SfAccumulationChart>
    </div>
</div>

<div class="col-lg-4 property-section">
    <div class="property-panel-section">
        <div class="property-panel-header">Properties</div>
        <div class="property-panel-content">
            <table title="Properties" style="width: 100%">
                <tr style="height: 50px">
                    <td style="width: 50%">
                        <div>
                            Pie Angle:
                        </div>
                    </td>
                    <td style="width: 70%;">
                        <div class="">
                            <input type="range" @onchange="changeAngle" value="@angle" min="0" max="360" style="width:90%" />
                        </div>
                    </td>
                    <td style="width: 30%">
                        <p style="font-weight: normal;"><span>@angle</span></p>
                    </td>
                </tr>
                <tr style="height: 50px">
                    <td style="width: 50%">
                        <div>
                            Outer Radius:
                        </div>
                    </td>
                    <td style="width: 50%;">
                        <div data-role="rangeslider">
                            <input type="range" @onchange="ChangeOuterRadius" value="@radius" min="0" max="80" style="width:90%" />
                        </div>
                    </td>
                    <td style="width: 30%">
                        <p style="font-weight: normal;"><span>@radius</span></p>
                    </td>
                </tr>
                <tr style="height: 50px">
                    <td style="width: 50%">
                        <div>
                            Explode Radius:
                        </div>
                    </td>
                    <td style="width: 50%;">
                        <div data-role="rangeslider">
                            <input type="range" @onchange="ChangeExplodeRadius" value="@exploderadius" min="0" max="40" style="width:90%" />
                        </div>
                    </td>
                    <td style="width: 30%">
                        <p style="font-weight: normal;"><span>@exploderadius</span></p>
                    </td>
                </tr>
                <tr style="height: 50px">
                    <td style="width: 50%">
                        <div>
                            Explode Index:
                        </div>
                    </td>
                    <td style="width: 50%;">
                        <div data-role="rangeslider">
                            <input type="range" @onchange="ChangeExplodeIndex" value="@ExplodeIndex" min="0" max="6" style="width:90%" />
                        </div>
                    </td>
                    <td style="width: 30%">
                        <p style="font-weight: normal;"><span>@ExplodeIndex</span></p>
                    </td>
                </tr>
            </table>
            </div>
        </div>
    </div>


    @code{

        public Theme Theme { get; set; }
        public double ExplodeIndex { get; set; } = 1;
        public string OuterRadius = "70%", ExplodeRadius = "10%";
        public int StartAngle = 0, EndAngle = 360;
        public List<PieData> PieChartPoints { get; set; } = new List<PieData>
    {
        new PieData { Browser = "Chrome", Users = 37},
        new PieData { Browser = "UC Browse", Users = 17},
        new PieData { Browser = "iPhone",  Users = 19 },
        new PieData { Browser = "Others", Users = 4 },
        new PieData { Browser = "Opera", Users = 11 },
        new PieData { Browser = "Android", Users = 12}
    };
        private int angle = 0, radius = 70, exploderadius = 10;

        protected override void OnInitialized()
        {
            Theme = ThemeHelper.GetCurrentTheme(NavigationManager.Uri);
        }

        private void changeAngle(Microsoft.AspNetCore.Components.ChangeEventArgs args)
        {
            StartAngle = EndAngle = angle = Convert.ToInt32(args.Value);
        }

        private void ChangeOuterRadius(Microsoft.AspNetCore.Components.ChangeEventArgs args)
        {
            radius = Convert.ToInt32(args.Value);
            OuterRadius = radius + "%";
        }

        private void ChangeExplodeRadius(Microsoft.AspNetCore.Components.ChangeEventArgs args)
        {
            exploderadius = Convert.ToInt32(args.Value);
            ExplodeRadius = exploderadius + "%";
        }

        private void ChangeExplodeIndex(Microsoft.AspNetCore.Components.ChangeEventArgs args)
        {
            ExplodeIndex = Convert.ToInt32(args.Value);
        }

        public class PieData
        {
            public string Browser { get; set; }
            public double Users { get; set; }
        }

    }
